import React, { useEffect, useState } from 'react';
import { Modal, Form, Space } from 'antd';
import FormCondition from '@/components/FormCondition';
import { connect } from 'umi';
import { Button, Row, Col } from 'antd';
import TableDataBlock from '@/components/TableDataBlock';
import { ExclamationCircleOutlined } from '@ant-design/icons'
import { notification } from 'antd';

const DeleteModel = (props) => {
  const { visible = false, onClose, loading, dispatch, handleCallback, onFatherClose } = props;
  const { show = false, detail = {} } = visible;
  const { orderSn, additionalDiscounts } = detail;
  console.log(detail)
  const [status, setStatus] = useState(null)
  const [form] = Form.useForm();
  // 确认提交
  const handleUpAudit = () => {
    form.validateFields().then((values) => {
      dispatch({
        type: 'order/fakeCheckOrder', payload: values, callback: () => {
          onClose()
          onFatherClose()
          handleCallback()
        }
      })

    });
  };
  useEffect(() => {
    if (!show) {
      setStatus(null)
    }
  }, [show])
  const SetTextArea = (props) => {
    const { form } = props;
    const list = [
      '收据或付款截图缺失',
      '收据商品与录入商品不一致',
      '收据商品科目与录入商品不一致',
      '学员信息不一致',
      '实收金额不正确',
      '应收金额不正确',
      '实际未到账或查不到支付纪录',
      '开单日期不正确',
      '支付时间与支付截图不一致',
      '订单备注不符合条件'
    ];
    return (
      <Row style={{ textAlign: 'left' }}>
        <Col offset={6} >
          快捷填入关键词:
          {list.map((item, index) => {
            return (
              <Button
                style={{ marginLeft: 8 }}
                type='link'
                key={index}
                onClick={() => {
                  let data = form.getFieldValue('remark') || '';
                  form.setFieldValue('remark', data + item + ',');
                }}
              >
                {item}
              </Button>
            );
          })}

        </Col>
      </Row>
    );
  }
  const formItems = [
    {
      label: `订单编号`,
      name: 'orderSn',
      disabled: true
    },
    {
      label: `审核状态`,
      name: 'status',
      type: 'select',
      style: { textAlign: 'left' },
      onChange: (e) => {
        setStatus(e)
        form.setFieldValue('remark', '');
      },
      select: {
        1: '通过',
        2: '拒绝'
      }
    },

    {
      label: `超额优惠`,
      name: 'additionalDiscounts',
      type: 'number',
      rules: [{ required: false }],
    },
    {
      label: `备注`,
      name: 'remark',
      type: 'textArea',
      rules: [{ required: false }],
    },
    {
      type: 'noForm',
      rules: [{ required: false }],
      visible: status === '2',
      formItem: <SetTextArea form={form}></SetTextArea>,
    },
  ];

  const modalProps = {
    title: '确认审核',
    width: 1200,
    visible: show,
    maskClosable: true,
    destroyOnClose: true,
    zIndex: 1001,
    confirmLoading: loading,
  };

  return (
    <Modal {...modalProps} onCancel={onClose} onOk={handleUpAudit}>
      <Space direction={'vertical'} style={{ display: 'flex', textAlign: 'center', justifyContent: 'center', width: '100%' }}>
        <FormCondition form={form} initialValues={{
          orderSn,
          additionalDiscounts
        }} formItems={formItems}></FormCondition>
      </Space>

    </Modal >
  );
};

export default connect(({ order, loading }) => ({
  loading: loading.effects['order/fakeCheckOrder'],
}))(DeleteModel);
;
